{% stylesheet %}
.block_product_single {
  max-width: var(--general_layout_width);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  margin: 0 auto;
}

.block_product-fill {
  width: 100%;
  max-width: 100%;
}

.block_product_single-right {
  flex-direction: row-reverse;
}
.block_product_single-right .product-photo{
    padding-left:30px;
}
.block_product_single-left .product-photo{
    padding-right:30px;
}
.block_product_single .product-photo {
  width: 50%;
  box-sizing: border-box;
}

.block_product_single .product-photo .product-photo-item {
  width: 100%;
  margin-bottom: 20px;
}

.block_product_single .product-photo .product-photo-item img {
  width: 100%;
  vertical-align: top;
}

.block_product_single .product-info {
  width: 50%;
  box-sizing: border-box;
}

.block_product_single .product-info .cell-item {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.block_product_single .product-info .product-info-title {
  text-align: center;
  font-size: var(--big_product_font_size);
  margin-bottom: 20px;
}

.block_product_single .product-info .product-info-subtitle {
  text-align: center;
  margin-bottom: 12px;
  color: var(--title_color);
  font-size: var(--product_font_size);
}

.block_product_single .product-info .product-info-describe {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 12px;
  color: var(--detail_color);
}

.block_product_single .product-info .product-sku-name {
  font-size: 1rem;
  color: var(--color-text-medium);
  line-height: 1.2857142857rem;
}

.block_product_single .product-info .product-price {
  font-size: 1.4285714286rem;
  line-height: 1.7142857143rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
    justify-content:center;

}

.block_product_single .product-info .product-price .product-price-number {
  color: var(--assist-color);
  margin-bottom: 6px;
}

.block_product_single .product-info .product-price .product-price-market {
  color: var(--color-text-low);
  text-decoration: line-through;
  margin-left: 10px;
  margin-bottom: 6px;

}

.block_product_single .product-info .product-price .product-price-discount {
    color: var(--buying_parice_color);
    background-color: var(--discount_tag_bg);
    color: var(--discount_tag_color);
    border-radius: 4px;
    font-size: 13px;
    padding: 1px 8px;
    margin-left: 10px;
    margin-bottom: 6px;

}

.block_product_single .product-info .product-sku-values {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.block_product_single .product-info .product-sku-values .product-sku-values-item {
  display: flex;
  align-items: center;
  color: var(--color-main);
  font-size: 1rem;
  /**  line-height: 2.2857142857rem;
    height: 2.2857142857rem;
     **/
  padding: 8px 15px;
  box-sizing: border-box;
  border: 1px solid transparent;
  cursor: pointer;
  margin-bottom: 12px;
}

/* .block_product_single .product-info .product-sku-values .product-sku-values-item + .product-sku-values-item {
  margin-right: 20px;
} */

.block_product_single .product-info .product-sku-values .product-sku-values-item:hover {
  border: 1px solid var(--color-main);
}

.block_product_single .product-info .product-sku-values .product-sku-values-item-active {
  border: 1px solid var(--color-main);
}

.block_product_single .product-info .product-sku-values img {
  width: 40px;
  vertical-align: middle;
  height: 40px;
  margin-right: 6px;
  object-fit: cover;
}

.block_product_single .product-info .product-calculator {
  height: 44px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.block_product_single .product-info .product-calculator .product-calculator-handle,
.block_product_single .product-info .product-calculator .product-calculator-value {
  width: 44px;
  text-align: center;
  line-height: 44px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}

.block_product_single .product-info .product-calculator .product-calculator-value {
  margin: 0 10px;
  font-size: 1rem;
  color: var(--color-main);
  background: transparent;
}

.block_product_single .product-info .product-calculator .product-calculator-handle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.block_product_single .product-info .product-calculator .add-icon {
  display: inline-block;
  position: relative;
  width: 15px;
  height: 15px;
}

.block_product_single .product-info .product-calculator .add-icon::before {
  position: absolute;
  left: 0;
  top: 7px;
  width: 15px;
  height: 1px;
  opacity: 0.9;
  background: var(--color-main);
  border-radius: 1px;
  content: "";
}

.block_product_single .product-info .product-calculator .add-icon::after {
  position: absolute;
  left: 7px;
  width: 1px;
  height: 15px;
  opacity: 0.9;
  background: var(--color-main);
  border-radius: 1px;
  content: "";
}

.block_product_single .product-info .product-calculator .reduce-icon {
  display: inline-block;
  position: relative;
  width: 15px;
  height: 15px;
}

.block_product_single .product-info .product-calculator .reduce-icon::before {
  position: absolute;
  left: 0;
  top: 7px;
  width: 15px;
  height: 1px;
  opacity: 0.9;
  background: var(--color-main);
  border-radius: 1px;
  content: "";
}

.block_product_single .product-info .product-btns {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.block_product_single .product-info .product-btns .add-cart {
  width: 100%;
  margin: 0 0 15px;
  box-sizing: border-box;
}

.block_product_single .product-info .product-btns .buynow {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.block_product_single .product-info .product-btns .divider {
  width: 20px;
}

@media screen and (max-width: 787px) {
  .block_product_single {
    display: flex;
    flex-direction: column;
  }
  .block_product_single .product-photo {
    width: 100%;
    padding:0;
  }
  .block_product_single .product-info {
    width: 100%;
    padding:0;
  }
}



.block_product_single .cell-star {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  margin-bottom: 15px;
}

.block_product_single .product-comment-fraction {
  display: flex;
  align-items: center;
}

.block_product_single .product-comment-fraction svg {
  margin-right: 4px;
}

.block_product_single .product-comment-fraction > svg:last-child {
  margin-right: 0;
}

.block_product_single .product-comment-fraction span {
  font-weight: 500;
  color: #1d1f21;
  font-size: 18px;
  line-height: 1;
  margin-left: 6px;
}

.block_product_single .comment-star-warp {
  position: relative;
  display: flex;
  align-items: center;
}

.block_product_single .comment-star-warp-choose {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.block_product_single .comment-star-warp-choose svg {
  flex-shrink: 0;
}

{% endstylesheet %}


{% if section.settings.good.id != "" %}
{% assign block_id = block_id | default : section.block_id  %}

{% get_product product_id={section.settings.good.id} %}
{% if product %}
 <div id="block_product_single-{{ block_id }}" class="container_wrapper block_product_single block_product_single-{{ section.settings.position }} {% if section.settings.is_width_fill %}block_product-fill{% endif %}">
    <div class="product-photo">
        {%- capture handle -%}/products/{{ product.handle }}?data_from={{data_from}}{%- endcapture -%}
        {%- assign productId =  block_id | default: block_id  -%}
        {% include 'product_preview', productHref:handle, previewImage:product.images,product:product ,productId: productId,blockId:block_id, showSmall:false,source:"block_product_single" %}
    </div>
    <div class="product-info {{theme_config.global.product_right_float}}" id="sku-option-{{ block_id }}">
        <!-- title -->
        <div class="plugin-product_single-title_top" data-product-id="{{product.id}}"></div>
        <div class="product-info-title general_title-color"><a href="/products/{{ product.handle }}?data_from={{data_from}}">{{ product.title | default: "Title" }}</a></div>
        {% include 'comment_star', class:"cell-star", score:product.star %}
        {% if section.settings.subtitle %}
        <div class="product-info-subtitle">{{ product.subtitle }}</div>
        {% endif %}
        {% comment %} sku spu控制 {% endcomment %}
        {% include 'product_sku_spu_show', className:"product-info-describe",style:"",spu:product.spu,sku:product.variant.sku %}        
        {% if section.settings.describe %}
        <div class="product-info-describe">{{ product.mini_detail }}</div>
        {% endif %}
        
        <div class="product-info-divider"></div>
        <div class="cell-item" style="margin-top: 0">
            <div class="product-price">
                <span class="product-price-number general_buying-color">{{ currency.symbol_left }}{{ product.variant_price_max | default: "0.00" }}</span>
                {% if product.variant_compare_at_price_max %}
                <span class="product-price-market general_original-color">{{ currency.symbol_left }}{{ product.variant_compare_at_price_max }}</span>
                {% endif %}
                {%- if product.id and theme_config.global.product_discount_label_style_switch -%}
                <div class="product-price-discount"></div>
                {%- endif -%}
            </div>
        </div>
        {%- if product.virtual_sale_count -%}
          <div class="product-info-describe virtual_sale">{{ product.virtual_sale_count | plus: product.sale_count }} {{lang.product.sold}}</div>
        {%- endif -%}
        <div class="plugin-product_single-price_bottom"  data-product-id="{{product.id}}"></div>

        <div class="sku-cell"></div>
        <div class="plugin-product_single-quantity_top" data-product-id="{{product.id}}"></div>
        {% if theme_config.global.product_quantity or theme_config.global.product_quantity  == nil %}
                    <div class="cell-item">
                        <span class="product-sku-name">{{lang.cart.list.quantity}}</span>
                    </div>
                    <div class="cell-item product-calculator-cell-item">
                        <div class="product-calculator" id='mo-quantity-{{ block_id | default : section.block_id }}'>
                            <div class="product-calculator-handle" data-type='reduce'>
                                {% include icon_minus ,{width:'16',height:'16'} %}
                            </div>
                            <input class="product-calculator-value"  min="1" type="number" value="{{theme_config.global.product_quantity_number | default:1}}"/>
                            <div class="product-calculator-handle" data-type='add'>
                                {% include icon_plus ,{width:'16',height:'16'} %}
                            </div>
                        </div>
                    </div>
        {% endif %}
       
        <div class="plugin-product_single-buy_top"  data-product-id="{{product.id}}"></div>
        <div class="cell-item">
            <div class="product-btns">
                    {% assign product_shopping_btn = theme_config.global.product_shopping_btn | default :'show' %}

                    {%- if product_shopping_btn != 'hide' -%}
                    <div class="product-btns product-cart-group" style="{% if product.available == 0 %}display:none{% endif %}">
                        {%- if product_shopping_btn == 'add' or product_shopping_btn == 'show'  -%}
                        <div class="secondary_btn product-cart control-product_detail-cart" data-type="cart" data-plug="cart" id='add-cart-{{ block_id | default : section.block_id }}'>{{lang.product.add_to_cart}}</div>
                        {%- endif -%}

                        {% if product_shopping_btn == 'show'  %}
                        <div class="divider"></div>
                        {% endif %}

                        {%- if product_shopping_btn == 'buy' or product_shopping_btn == 'show'  -%}
                        <div class="main_btn product-now control-product_detail-buy" style='margin-top:15px' data-type="buyNow" data-plug="buy_now" id="buynow-{{ block_id | default : section.block_id }}">{{lang.product.buy_it_now}}</div>
                        {%- endif -%}
                    </div>
                    {%- endif -%}
                    <div class="product-btns product-out-of-stock" style="{% if product.available == 1 %}display:none{% endif %}">
                        <div class="mo-btn mo-btn-default mo-btn-disable mo-btn-plan mo-btn-max mo-btn-block" >{{lang.product.out_of_stock}}</div>
                    </div>
                    <div class="product-btns product-out-of-delete" style="display: none;">
                      <div class="mo-btn mo-btn-default mo-btn-disable mo-btn-plan mo-btn-max mo-btn-block" >{{lang.account.wishlist.product_offline}}</div>
                    </div>
            </div>
        </div>
        {% unless product.available == 0 %}
        {% get_payments %}
        {% if payment %}
            <div class="cell-item product-payment-box" style="margin-top:17px">
                {% include product_payment_paypalcheckout , { pay_block_id:block_id } %}
            </div>
        {% endif %}
        {% endunless %}
         <div class="plugin-product_single-buy_bottom"  data-product-id="{{product.id}}"></div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        var productInfo = {{product | json}};

        const productDetail = new omesaasProduct({
            product: productInfo,
            data_from:'{{ data_from }}',
            ec_currency_code: '{{ base_currency.standard_code }}',
            id: '#sku-option-{{ block_id }}',
            block_id:"{{block_id}}",
            {% if theme_config.global.product_quantity == true %}
            quantity:{{theme_config.global.product_quantity_number | default:1}},
            {% endif %}
        })

        //PayPal payment callback succeeded
        moi.addEvent('paypalec_callback', function (event) {
            //Check whether the payID is equal to the current building block ID
            if(event.params.payId === '{{block_id}}'){
                productDetail.callbackAddToCart();
            }
        })

        moi.quantity({
            dom: $("#mo-quantity-{{ block_id | default : section.block_id }}"),
            change(val) {
                productDetail.setSelectedVal({ quantity: val.value });
            }
        })


        //Add to cart
        $("#add-cart-{{ block_id | default : section.block_id }}").click(function () {
            if (!productDetail.verifyOption('cart')) {
                return false
            }
            
            var load = moi.nodeShowLoading(this, "mo-loading-black")
            productDetail.addCart(function () { load.close(); }, function (data) {
                if (!data.code) {
                    productDetail.cartLayer();
                } else {
                    return moi.alert({
                        title: data.msg
                    });
                }
            })
        })


        //Direct purchase
        $("#buynow-{{ block_id | default : section.block_id }}").click(function () {
            if (!productDetail.verifyOption('buy')) {
                return false
            }
            var load = moi.nodeShowLoading(this)
            productDetail.buynow(function () { load.close(); }, function (ret) {
                if (!ret.code) {
                    window.location.href = ret.data.checkout_url
                } else {
                    return moi.alert({
                        title: ret.msg
                    });
                }
            })
        })

    })
</script>
{% endif %}
{% else %}
<div id="block_product_single-{{ block_id | default: 'test' }}" style="padding:20px 0" class="container_wrapper block_product_single block_product_single-{{ section.settings.position }} {% if section.settings.is_width_fill %}block_product-fill{% endif %}">
    <div class="product-photo">
        <div class="product-photo-item">
            <img style="width: 100%" src="{{ 'empty.png' | public_asset_abs_url }}"  />
        </div>
    </div>
    <div class="product-info">
        <div class="product-info-title general_title-color">title</div>
        {% if section.settings.describe %}
        <div class="product-info-describe">describe</div>
        {% endif %}
        <div class="product-info-divider"></div>
        <div class="cell-item" style="margin-top: 0">
            <div class="product-price">
                <span class="product-price-number general_buying-color">{{ currency.symbol_left }}8.88</span>
                <span class="product-price-market general_original-color">{{ currency.symbol_left }}8.88</span>
            </div>
            
        </div>
        <div class="plugin-product_single-quantity_top"></div>
        <div class="cell-item">
            <span class="product-sku-name">Quantity</span>
        </div>
        <div class="cell-item product-calculator-cell-item">
            <div class="product-calculator mo-quantity">
                <div class="product-calculator-handle" data-type="reduce">
                    <span class="reduce-icon"></span>
                </div>
                <div class="product-calculator-value">1</div>
                <div class="product-calculator-handle" data-type="add">
                    <span class="add-icon"></span>
                </div>
            </div>
        </div>
        <div class="cell-item">
            <div class="product-btns">
                <div class="secondary_btn add-cart" data-id="{{ block_id | default: 'test'  }}">{{lang.product.add_to_cart}}</div>
                <div class="main_btn buynow" data-id="{{ block_id | default: 'test'  }}">{{lang.product.buy_it_now}}</div>
            </div>
        </div>
    </div>
</div>

{% endif %}



{% schema %}
{
	"tag": "",
	"class": "block_product_single",
	"is_global": false,
	"name": {
		"zh_CN": "单个商品",
		"en_US": "Single product"
	},
	"max_blocks": "",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_product",
			"label": {
				"zh_CN": "选择商品",
				"en_US": "Select product"
			},
			"default": {
				"id": "id",
				"title": ""
			},
			"id": "good"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "显示副标题",
				"en_US": "Show subheadings"
			},
			"id": "subtitle",
			"default": true
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "显示简短描述",
				"en_US": "Show a short description"
			},
			"id": "describe",
			"default": true
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "pc图片位置",
				"en_US": "PC image location"
			},
			"default": "left",
			"id": "position",
			"option": [
				{
					"label": {
						"zh_CN": "居左",
						"en_US": "To the left"
					},
					"value": "left"
				},
				{
					"label": {
						"zh_CN": "居右",
						"en_US": "To the right"
					},
					"value": "right"
				}
			]
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"good": {
				"id": "",
				"title": ""
			},
			"subtitle": true,
			"describe": true,
			"position": "left"
		},
		"blocks": []
	},
	"icon": "icon-dangeshangpin"
}
{% endschema %}